<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-12 10:15:42
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-25 20:53:38
 * @FilePath: \hbzc-groupmeal-center-web\src\Public-UIlibrary\pb-check\index.vue
-->
<template>
  <div class="pb-check-box  ">
    <div v-for="(item, index) in checkData" :key="index" @click="clickHandler(item, index)" class="check-item"
      :class="item?.checked ? 'is-checked' : ''">

      <slot>{{ item[defaultProps.label] }}</slot>
      <div class="angle-box"></div>
      <div class="icon-box">
        <pb-icon name="check" color="#fff" size="6"></pb-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  list: {
    type: Array
  },
  defaultProps: {
    type: Object,
    default: {
      label: 'label',
      value: 'value'
    }
  },
  isSingle: {
    type: Boolean,
    default: false
  },
});

const emits = defineEmits(['change'])


const checkData = ref([])
watch(
  () => props.list,
  (val) => {
    checkData.value = val
  },
  {
    immediate: true,
    deep: true,
  }
)
const selectList = ref([])

const clickHandler = (item, idx) => {
  if (props.isSingle) {
    console.log(idx);

    checkData.value.forEach((el, i) => {
      console.log(idx == i);
      if (i === idx) {
        el.checked = !el.checked
      }
    });
    console.log(checkData.value);

    selectList.value = checkData.value.filter(el => {
      return el.checked
    })
    emits('change', checkData.value)
  } else {
    if (props.isSingle) {
      console.log(idx);

      checkData.value.forEach((el, i) => {
        console.log(idx == i);
        if (i === idx) {
          el.checked = !el.checked
        }
      });
      console.log(checkData.value);

      selectList.value = checkData.value.filter(el => {
        return el.checked
      })
      emits('change', checkData.value)
    } else {
      checkData.value.forEach((el, i) => {
        el.checked = false
        if (i === idx) {
          el.checked = true
        }
      });
      emits('change', item)
    }

  }

}
</script>

<style lang="scss" scoped>
.hover {
  background: var(--pb-color-primary-light-1) !important;
  color: var(--pb-color-primary) !important;
}

.pb-check-box {

  display: flex;
  flex-wrap: wrap;

  .check-item {
    cursor: pointer;
    padding: 3px 18px;
    margin: 2px 4px;
    height: 28px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    position: relative;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    text-align: center;

    &:hover {
      @extend .hover;
    }
  }
}

.is-checked {
  @extend .hover;
  border: 1px solid var(--pb-color-primary);

  .angle-box {
    position: absolute;
    bottom: -12px;
    right: -12px;
    width: 0;
    height: 0;
    border: 12px solid;
    border-color: var(--pb-color-primary) transparent transparent transparent;
    transform: rotate(314deg);
  }

  .icon-box {
    position: absolute;
    bottom: -2px;
    right: 2px;
  }
}
</style>